<!-- pages/notepad/notepad.vue -->
<template>
  <view class="notepad-container">
    <!-- 顶部导航栏 -->
    <view class="header-bar">

      <button class="add-note-btn" @tap="showAddNoteModal">
        <text class="btn-icon">+</text>
      </button>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrap">
        <text class="search-icon">🔍</text>
        <input 
          type="text" 
          class="search-input" 
          placeholder="搜索笔记..." 
          v-model="searchKeyword"
          @input="searchNotes"
        />
        <text v-if="searchKeyword" class="clear-icon" @tap="clearSearch">×</text>
      </view>
    </view>

    <!-- 笔记分类标签 -->
    <scroll-view scroll-x class="category-scroll">
      <view class="category-tabs">
        <view 
          v-for="(category, index) in categories" 
          :key="index" 
          class="category-tab" 
          :class="{'active': activeCategory === category.id}"
          @tap="setActiveCategory(category.id)"
        >
          <text>{{ category.name }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 笔记列表 -->
    <scroll-view 
      scroll-y 
      class="notes-list"
      @scrolltolower="loadMoreNotes"
      :refresher-triggered="isRefreshing"
      refresher-enabled
      @refresherrefresh="refreshNotes"
    >
      <view v-if="filteredNotes.length === 0" class="empty-state">
        <text class="empty-icon">📝</text>
        <text class="empty-text">暂无笔记</text>
        <button class="empty-btn" @tap="showAddNoteModal">创建第一篇笔记</button>
      </view>

      <view v-else class="notes-grid">
        <view 
          v-for="(note, index) in filteredNotes" 
          :key="index" 
          class="note-card"
          :class="{'important': note.isImportant}"
          @tap="openNoteDetail(note)"
          :style="{ backgroundColor: note.color }"
        >
          <view class="note-header">
            <text class="note-title">{{ note.title }}</text>
            <text v-if="note.isImportant" class="important-icon">⭐</text>
          </view>
          <text class="note-preview">{{ getPreviewText(note.content) }}</text>
          <view class="note-footer">
            <text class="note-date">{{ formatDate(note.updateTime) }}</text>
            <view class="note-tags">
              <text v-for="(tag, tIndex) in note.tags" :key="tIndex" class="note-tag">{{ tag }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 新建笔记弹窗 -->
    <view class="modal" v-if="showNoteModal">
      <view class="modal-content note-modal">
        <view class="modal-header">
          <text class="modal-title">{{ editingNote.id ? '编辑笔记' : '新建笔记' }}</text>
          <text class="modal-close" @tap="closeNoteModal">×</text>
        </view>
        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">标题</text>
            <input type="text" class="form-input" v-model="editingNote.title" placeholder="输入笔记标题" />
          </view>
          
          <view class="form-group">
            <view class="form-header">
              <text class="form-label">内容</text>
              <view class="note-tools">
                <text class="tool-btn" @tap="insertBold">B</text>
                <text class="tool-btn" @tap="insertItalic">I</text>
                <text class="tool-btn" @tap="insertList">•</text>
              </view>
            </view>
            <textarea 
              class="form-textarea note-content" 
              v-model="editingNote.content" 
              placeholder="写下你的笔记内容..."
            />
          </view>

          <view class="form-group">
            <text class="form-label">分类</text>
            <picker class="form-picker" @change="onCategoryChange" :value="categoryIndex" :range="categoryOptions">
              <view class="picker-value">
                <text>{{ categoryOptions[categoryIndex] }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <view class="form-group">
            <text class="form-label">标签</text>
            <view class="tags-input-container">
              <view class="tags-list">
                <view 
                  v-for="(tag, index) in editingNote.tags" 
                  :key="index" 
                  class="tag-item"
                >
                  <text class="tag-text">{{ tag }}</text>
                  <text class="tag-remove" @tap="removeTag(index)">×</text>
                </view>
              </view>
              <view class="tags-input-wrap">
                <input 
                  type="text" 
                  class="tags-input" 
                  v-model="newTag"
                  placeholder="添加标签..." 
                  @confirm="addTag"
                />
                <text v-if="newTag" class="add-tag-btn" @tap="addTag">+</text>
              </view>
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">笔记颜色</text>
            <view class="color-options">
              <view 
                v-for="(color, index) in noteColors" 
                :key="index"
                class="color-option"
                :class="{'selected': editingNote.color === color}"
                :style="{ backgroundColor: color }"
                @tap="editingNote.color = color"
              ></view>
            </view>
          </view>

          <view class="form-group">
            <view class="important-checkbox" @tap="toggleImportant">
              <view class="checkbox" :class="{'checked': editingNote.isImportant}">
                <text v-if="editingNote.isImportant" class="check-mark">✓</text>
              </view>
              <text class="checkbox-label">标记为重要</text>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @tap="closeNoteModal">取消</button>
          <button class="modal-btn primary" @tap="saveNote">保存</button>
        </view>
      </view>
    </view>

    <!-- 笔记详情弹窗 -->
    <view class="modal" v-if="showDetailModal">
      <view class="modal-content detail-modal" :style="{ backgroundColor: detailNote.color }">
        <view class="modal-header">
          <view class="detail-actions">
            <button class="icon-btn" @tap="editCurrentNote">
              <text class="action-icon">✏️</text>
            </button>
            <button class="icon-btn" @tap="confirmDeleteNote">
              <text class="action-icon">🗑️</text>
            </button>
          </view>
          <text class="modal-close" @tap="closeDetailModal">×</text>
        </view>
        <view class="modal-body">
          <view class="detail-header">
            <text class="detail-title">{{ detailNote.title }}</text>
            <text v-if="detailNote.isImportant" class="important-icon">⭐</text>
          </view>
          
          <text class="detail-date">最后更新: {{ formatDate(detailNote.updateTime) }}</text>
          
          <view class="detail-tags" v-if="detailNote.tags && detailNote.tags.length > 0">
            <text v-for="(tag, index) in detailNote.tags" :key="index" class="detail-tag">{{ tag }}</text>
          </view>
          
          <view class="detail-content">
            <text>{{ detailNote.content }}</text>
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @tap="closeDetailModal">关闭</button>
          <button class="modal-btn primary" @tap="shareNote">分享</button>
        </view>
      </view>
    </view>

    <!-- 底部标签栏 -->
  
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 笔记分类
const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'study', name: '学习笔记' },
  { id: 'exam', name: '考试重点' },
  { id: 'question', name: '问题记录' },
  { id: 'summary', name: '知识总结' },
  { id: 'other', name: '其他' }
]);

// 当前选中的分类
const activeCategory = ref('all');

// 笔记颜色选项
const noteColors = [
  '#FFFFFF', // 白色
  '#F8F5E4', // 米色
  '#E6F3E9', // 浅绿
  '#EFF8FF', // 浅蓝
  '#F9EBFF', // 浅紫
  '#FFF5F5', // 浅红
  '#FFF8E6'  // 浅黄
];

// 搜索关键词
const searchKeyword = ref('');

// 分页加载
const page = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);
const isRefreshing = ref(false);

// 模态框显示状态
const showNoteModal = ref(false);
const showDetailModal = ref(false);

// 编辑中的笔记
const editingNote = ref({
  id: '',
  title: '',
  content: '',
  category: 'study',
  tags: [],
  color: '#FFFFFF',
  isImportant: false,
  createTime: null,
  updateTime: null
});

// 当前查看的笔记详情
const detailNote = ref({});

// 新标签输入
const newTag = ref('');

// 分类选择器
const categoryOptions = computed(() => {
  return categories.value.filter(c => c.id !== 'all').map(c => c.name);
});
const categoryIndex = ref(0);

// 模拟笔记数据
const notes = ref([
  {
    id: '1',
    title: '马原知识点总结',
    content: '马克思主义哲学的基本原理包括：\n1. 物质决定意识\n2. 矛盾是事物发展的动力\n3. 量变引起质变\n4. 否定之否定规律\n\n这些原理构成了马克思主义哲学的基础，对于理解世界和改造世界具有重要意义。',
    category: 'study',
    tags: ['政治', '马原', '哲学'],
    color: '#E6F3E9',
    isImportant: true,
    createTime: Date.now() - 1000000,
    updateTime: Date.now() - 100000
  },
  {
    id: '2',
    title: '英语长难句分析方法',
    content: '分析英语长难句的步骤：\n\n1. 找主干：主语+谓语+宾语\n2. 找从句：定语从句、状语从句等\n3. 找修饰成分：形容词、副词等\n4. 理清逻辑关系\n\n示例分析：The theory that was proposed by the scientist who won the Nobel Prize last year has revolutionized our understanding of quantum physics.',
    category: 'study',
    tags: ['英语', '长难句', '语法'],
    color: '#EFF8FF',
    isImportant: false,
    createTime: Date.now() - 900000,
    updateTime: Date.now() - 90000
  },
  {
    id: '3',
    title: '高数公式速记',
    content: '常见导数公式：\n\n(x^n)′ = nx^(n-1)\n(sin x)′ = cos x\n(cos x)′ = -sin x\n(e^x)′ = e^x\n(ln x)′ = 1/x\n\n积分公式：\n\n∫x^n dx = x^(n+1)/(n+1) + C (n≠-1)\n∫sin x dx = -cos x + C\n∫cos x dx = sin x + C',
    category: 'exam',
    tags: ['数学', '高数', '公式'],
    color: '#FFF8E6',
    isImportant: true,
    createTime: Date.now() - 800000,
    updateTime: Date.now() - 80000
  },
  {
    id: '4',
    title: '政治考点梳理',
    content: '中国特色社会主义理论体系的主要内容：\n\n1. 邓小平理论\n2. "三个代表"重要思想\n3. 科学发展观\n4. 习近平新时代中国特色社会主义思想\n\n各个理论的核心观点和历史背景...',
    category: 'study',
    tags: ['政治', '考点', '思想理论'],
    color: '#F9EBFF',
    isImportant: false,
    createTime: Date.now() - 700000,
    updateTime: Date.now() - 70000
  },
  {
    id: '5',
    title: '专业课复习计划',
    content: '第一阶段（基础夯实）：\n- 复习教材第1-5章\n- 做课后习题\n- 整理知识点\n\n第二阶段（强化提升）：\n- 复习教材第6-10章\n- 做历年真题\n- 分析答题技巧\n\n第三阶段（冲刺阶段）：\n- 模拟考试\n- 查漏补缺\n- 重点难点攻克',
    category: 'other',
    tags: ['专业课', '计划', '复习'],
    color: '#FFFFFF',
    isImportant: false,
    createTime: Date.now() - 600000,
    updateTime: Date.now() - 60000
  }
]);

// 根据分类和搜索过滤笔记
const filteredNotes = computed(() => {
  let result = notes.value;
  
  // 按分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter(note => note.category === activeCategory.value);
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(note => 
      note.title.toLowerCase().includes(keyword) || 
      note.content.toLowerCase().includes(keyword) ||
      note.tags.some(tag => tag.toLowerCase().includes(keyword))
    );
  }
  
  return result;
});

// 获取笔记预览文本
const getPreviewText = (content) => {
  if (!content) return '';
  return content.length > 50 ? content.substring(0, 50) + '...' : content;
};

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now - date;
  
  // 一天内显示"今天"
  if (diff < 24 * 60 * 60 * 1000 && 
      date.getDate() === now.getDate()) {
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `今天 ${hours}:${minutes}`;
  }
  
  // 一周内显示星期几
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    return weekdays[date.getDay()];
  }
  
  // 其他情况显示完整日期
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

// 设置当前分类
const setActiveCategory = (categoryId) => {
  activeCategory.value = categoryId;
};

// 搜索笔记
const searchNotes = () => {
  // 实际应用中可能需要调用API进行搜索
  page.value = 1;
  hasMore.value = true;
};

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = '';
  searchNotes();
};

// 加载更多笔记
const loadMoreNotes = () => {
  if (!hasMore.value) return;
  
  // 模拟加载更多
  page.value++;
  if (page.value > 3) {
    hasMore.value = false;
  }
};

// 刷新笔记列表
const refreshNotes = () => {
  isRefreshing.value = true;
  
  // 模拟刷新
  setTimeout(() => {
    page.value = 1;
    hasMore.value = true;
    isRefreshing.value = false;
  }, 1000);
};

// 显示添加笔记弹窗
const showAddNoteModal = () => {
  // 重置编辑状态
  editingNote.value = {
    id: '',
    title: '',
    content: '',
    category: 'study',
    tags: [],
    color: '#FFFFFF',
    isImportant: false,
    createTime: null,
    updateTime: null
  };
  
  // 设置默认分类索引
  categoryIndex.value = 0;
  
  showNoteModal.value = true;
};

// 关闭笔记弹窗
const closeNoteModal = () => {
  showNoteModal.value = false;
};

// 分类选择变化处理
const onCategoryChange = (e) => {
  categoryIndex.value = e.detail.value;
  editingNote.value.category = categories.value.filter(c => c.id !== 'all')[categoryIndex.value].id;
};

// 添加标签
const addTag = () => {
  if (!newTag.value.trim()) return;
  
  if (!editingNote.value.tags) {
    editingNote.value.tags = [];
  }
  
  if (!editingNote.value.tags.includes(newTag.value.trim())) {
    editingNote.value.tags.push(newTag.value.trim());
  }
  
  newTag.value = '';
};

// 移除标签
const removeTag = (index) => {
  editingNote.value.tags.splice(index, 1);
};

// 切换重要标记
const toggleImportant = () => {
  editingNote.value.isImportant = !editingNote.value.isImportant;
};

// 插入粗体标记
const insertBold = () => {
  const textarea = document.querySelector('.note-content');
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  
  if (start === end) {
    // 没有选中文本，插入占位符
    const text = editingNote.value.content;
    editingNote.value.content = text.substring(0, start) + '**粗体文本**' + text.substring(end);
  } else {
    // 包裹选中的文本
    const text = editingNote.value.content;
    const selected = text.substring(start, end);
    editingNote.value.content = text.substring(0, start) + '**' + selected + '**' + text.substring(end);
  }
};

// 插入斜体标记
const insertItalic = () => {
  const textarea = document.querySelector('.note-content');
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  
  if (start === end) {
    // 没有选中文本，插入占位符
    const text = editingNote.value.content;
    editingNote.value.content = text.substring(0, start) + '*斜体文本*' + text.substring(end);
  } else {
    // 包裹选中的文本
    const text = editingNote.value.content;
    const selected = text.substring(start, end);
    editingNote.value.content = text.substring(0, start) + '*' + selected + '*' + text.substring(end);
  }
};

// 插入列表标记
const insertList = () => {
  const textarea = document.querySelector('.note-content');
  const start = textarea.selectionStart;
  
  // 插入列表项
  const text = editingNote.value.content;
  editingNote.value.content = text.substring(0, start) + '\n- 列表项\n- 列表项\n- 列表项' + text.substring(start);
};

// 保存笔记
const saveNote = () => {
  // 表单验证
  if (!editingNote.value.title.trim()) {
    uni.showToast({
      title: '请输入笔记标题',
      icon: 'none'
    });
    return;
  }
  
  const now = Date.now();
  
  if (editingNote.value.id) {
    // 更新已有笔记
    const index = notes.value.findIndex(n => n.id === editingNote.value.id);
    if (index !== -1) {
      editingNote.value.updateTime = now;
      notes.value[index] = { ...editingNote.value };
    }
  } else {
    // 添加新笔记
    const newNote = {
      ...editingNote.value,
      id: `note_${now}`,
      createTime: now,
      updateTime: now
    };
    notes.value.unshift(newNote);
  }
  
  // 关闭弹窗
  showNoteModal.value = false;
  
  uni.showToast({
    title: '笔记已保存',
    icon: 'success'
  });
};

// 打开笔记详情
const openNoteDetail = (note) => {
  detailNote.value = { ...note };
  showDetailModal.value = true;
};

// 关闭笔记详情
const closeDetailModal = () => {
  showDetailModal.value = false;
};

// 编辑当前笔记
const editCurrentNote = () => {
  editingNote.value = { ...detailNote.value };
  
  // 设置分类索引
  const categoryIds = categories.value.filter(c => c.id !== 'all').map(c => c.id);
  categoryIndex.value = categoryIds.indexOf(editingNote.value.category);
  if (categoryIndex.value === -1) categoryIndex.value = 0;
  
  // 切换弹窗
  showDetailModal.value = false;
  showNoteModal.value = true;
};

// 确认删除笔记
const confirmDeleteNote = () => {
  uni.showModal({
    title: '删除笔记',
    content: '确定要删除这篇笔记吗？删除后无法恢复。',
    confirmText: '删除',
    confirmColor: '#ff4d4f',
    success: (res) => {
      if (res.confirm) {
        // 删除笔记
        const index = notes.value.findIndex(n => n.id === detailNote.value.id);
        if (index !== -1) {
          notes.value.splice(index, 1);
        }
        
        // 关闭弹窗
        showDetailModal.value = false;
        
        uni.showToast({
          title: '笔记已删除',
          icon: 'success'
        });
      }
    }
  });
};

// 分享笔记
const shareNote = () => {
  uni.showActionSheet({
    itemList: ['复制内容', '分享到微信', '分享到QQ', '导出PDF'],
    success: (res) => {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    }
  });
};

onMounted(() => {
  // 页面加载时可以进行的初始化操作
  uni.setNavigationBarTitle({
    title: '笔记本'
  });
});
</script>

<style>
.notepad-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.header-bar {
  background-color: #A8BF8F;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
}

.page-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
}

.add-note-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.btn-icon {
  font-size: 40rpx;
  color: #A8BF8F;
  font-weight: bold;
}

/* 搜索栏 */
.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  padding: 0 20rpx;
  height: 70rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
}

.clear-icon {
  font-size: 32rpx;
  color: #999;
  padding: 0 10rpx;
}

/* 分类标签 */
.category-scroll {
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.category-tabs {
  display: flex;
  padding: 20rpx 30rpx;
  white-space: nowrap;
}

.category-tab {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  background-color: #f0f0f0;
  color: #666;
  font-size: 28rpx;
}

.category-tab.active {
  background-color: #A8BF8F;
  color: #fff;
}

/* 笔记列表 */
.notes-list {
  height: calc(100vh - 360rpx);
}

.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  color: #ccc;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.empty-btn {
  padding: 15rpx 40rpx;
  border-radius: 40rpx;
  background-color: #A8BF8F;
  color: #fff;
  font-size: 28rpx;
}

.notes-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.note-card {
  width: calc(100% - 20rpx);
  margin: 10rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 240rpx;
  position: relative;
  overflow: hidden;
}

.note-card.important::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30rpx 30rpx 0;
  border-color: transparent #ffcc00 transparent transparent;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10rpx;
}

.note-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.important-icon {
  font-size: 24rpx;
  color: #ffcc00;
  margin-left: 10rpx;
}

.note-preview {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 16rpx;
}

.note-footer {
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
}

.note-date {
  color: #999;
  margin-bottom: 6rpx;
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
}

.note-tag {
  background-color: #f0f0f0;
  color: #666;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
  margin-bottom: 6rpx;
}

/* 新建笔记弹窗样式 */
.note-modal {
  width: 700rpx;
  max-height: 90vh;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-tools {
  display: flex;
  gap: 20rpx;
}

.tool-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #f0f0f0;
  color: #333;
  font-size:.24rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-textarea.note-content {
  height: 300rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.tags-input-container {
  border-radius: 8rpx;
  background-color: #f5f5f5;
  padding: 10rpx 20rpx;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  background-color: #e0e0e0;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.tag-text {
  font-size: 24rpx;
  color: #333;
}

.tag-remove {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

.tags-input-wrap {
  display: flex;
  align-items: center;
}

.tags-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  background-color: transparent;
}

.add-tag-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #A8BF8F;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 10rpx;
}

.color-option {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid #e0e0e0;
  position: relative;
}

.color-option.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 28rpx;
}

.important-checkbox {
  display: flex;
  align-items: center;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border-radius: 4rpx;
  border: 2rpx solid #e0e0e0;
  margin-right: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox.checked {
  background-color: #A8BF8F;
  border-color: #A8BF8F;
}

.check-mark {
  color: #fff;
  font-size: 24rpx;
}

.checkbox-label {
  font-size: 28rpx;
  color: #333;
}

/* 笔记详情弹窗样式 */
.detail-modal {
  width: 700rpx;
  max-height: 90vh;
}

.detail-actions {
  display: flex;
  gap: 20rpx;
}

.icon-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.action-icon {
  font-size: 32rpx;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.detail-date {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
  gap: 10rpx;
}

.detail-tag {
  font-size: 24rpx;
  background-color: rgba(0, 0, 0, 0.05);
  color: #666;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
}

.detail-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 30rpx;
  white-space: pre-wrap;
}

/* 表单公共样式 */
.form-group {
  margin-bottom: 24rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.picker-value {
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 650rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
  max-height: 700rpx;
  overflow-y: auto;
}

.modal-footer {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.modal-btn.primary {
  background-color: #A8BF8F;
  color: white;
}

/* 底部标签栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab-icon {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}

.tab-text {
  font-size: 22rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #A8BF8F;
  font-weight: bold;
}
</style>